import React, { useState } from 'react';
import { Card, Table, Button, Input, Select, Space, Pagination, Modal, Avatar, Input as AntInput, DatePicker, Descriptions } from 'antd';
import { useNavigate } from 'react-router-dom';
import { FileTextOutlined, UserOutlined, CalendarOutlined, TagOutlined, AppstoreOutlined, ClusterOutlined } from '@ant-design/icons';

const { Option } = Select;

const mockComments = [
  {
    id: 1,
    avatar: 'https://randomuser.me/api/portraits/women/1.jpg',
    name: '墨墨',
    time: '一周前',
    content: '这个评论插件AntSay，简单三步即可在自己的网站集成嵌入，超级。\n1. 获得APP ID\n2. 一行代码引入组件\n3. 配置几个参数\n在线使用吧，地址：http://say.alipay.net/',
    likes: 2,
    replies: [],
  },
  {
    id: 2,
    avatar: 'https://randomuser.me/api/portraits/women/2.jpg',
    name: '淘淘',
    time: '一周前',
    content: '开启评论不是很酷嘛！这个APP写得非常棒！5分钟就部署好了！赞',
    likes: 0,
    replies: [
      {
        id: 21,
        name: '路路',
        content: '不只支持PC还支持mobile，真贴心 @墨墨',
        time: '一周前',
      },
      {
        id: 22,
        name: '淘淘',
        content: '托儿伪本鸡蛋',
        time: '3分钟前',
      },
    ],
  },
  {
    id: 3,
    avatar: 'https://randomuser.me/api/portraits/women/3.jpg',
    name: '左宜',
    time: '一周前',
    content: '不只支持PC还支持mobile，真贴心 @墨墨',
    likes: 0,
    replies: [],
  },
];

const data = [
  { key: 1, title: '文章标题示例', channel: '小程序', category: '今日热点', type: '图文', keyword: '年检', commentCount: 5, lastCommentTime: '2022-01-23' },
  { key: 2, title: '对于年检，你焦虑吗？', channel: '小程序', category: '今日热点', type: '视频', keyword: '年检', commentCount: 18, lastCommentTime: '2022-01-23' },
  { key: 3, title: '针对新引进成都大学生推出租房补贴', channel: '小程序', category: '今日热点', type: '图文', keyword: '年检', commentCount: 1, lastCommentTime: '2022-01-23' },
  { key: 4, title: '中小微、个体户，这些扶持政策必收藏！', channel: '小程序', category: '今日热点', type: '图文', keyword: '年检', commentCount: 16, lastCommentTime: '2022-01-23' },
  { key: 5, title: '冬奥盛宴上有哪些黑科技日常的踩', channel: '小程序', category: '今日热点', type: '图文', keyword: '年检', commentCount: 93, lastCommentTime: '2022-01-23' },
  { key: 6, title: '冬奥会临近，疫情防控有哪...', channel: '小程序', category: '今日热点', type: '图文', keyword: '年检', commentCount: 47, lastCommentTime: '2022-01-23' },
  { key: 7, title: '浙江新增境外输入确诊病例例', channel: '小程序', category: '今日热点', type: '图文', keyword: '年检', commentCount: 26, lastCommentTime: '2022-01-23' },
  { key: 8, title: '印度热浪创纪录拉响新高科技', channel: '小程序', category: '今日热点', type: '图文', keyword: '年检', commentCount: 83, lastCommentTime: '2022-01-23' },
  { key: 9, title: '电价下行成必然逻辑，技术实事求是', channel: '小程序', category: '今日热点', type: '图文', keyword: '年检', commentCount: 22, lastCommentTime: '2022-01-23' },
  { key: 10, title: '2022年货币市场冰火', channel: '小程序', category: '今日热点', type: '图文', keyword: '年检', commentCount: 71, lastCommentTime: '2022-01-23' },
  { key: 11, title: '已有许多为什么突然247亿下注销新规', channel: '小程序', category: '今日热点', type: '图文', keyword: '年检', commentCount: 12, lastCommentTime: '2022-01-23' },
];

export default function ArticleComment() {
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [searchTitle, setSearchTitle] = useState("");
  const [searchType, setSearchType] = useState("");
  const [filteredData, setFilteredData] = useState(data);
  const [commentModalVisible, setCommentModalVisible] = useState(false);
  const [currentComments, setCurrentComments] = useState([]);
  const [commentTime, setCommentTime] = useState(null);
  const [articleModalVisible, setArticleModalVisible] = useState(false);
  const [articleDetail, setArticleDetail] = useState(null);
  const navigate = useNavigate();

  // 打开评论弹窗
  const handleShowComments = (record) => {
    setCurrentComments(mockComments); // 实际项目可根据 record 获取对应评论
    setCommentModalVisible(true);
  };

  // 打开文章详情弹窗
  const handleShowArticle = (record) => {
    setArticleDetail(record);
    setArticleModalVisible(true);
  };

  // 查询功能
  const handleSearch = () => {
    setFilteredData(
      data.filter(item => {
        const matchTitle = searchTitle ? item.title.includes(searchTitle) : false;
        const matchType = searchType ? item.type === searchType : false;
        return matchTitle || matchType;
      })
    );
  };

  // 重置功能
  const handleReset = () => {
    setSearchTitle("");
    setSearchType("");
    setFilteredData(data);
  };

  const columns = [
    { title: '文章标题', dataIndex: 'title', key: 'title', width: 220, render: (text) => <span style={{fontWeight:500}}>{text}</span> },
    { title: '发布渠道', dataIndex: 'channel', key: 'channel', width: 100 },
    { title: '发布频道', dataIndex: 'category', key: 'category', width: 100 },
    { title: '文章类型', dataIndex: 'type', key: 'type', width: 100 },
    { title: '关键词', dataIndex: 'keyword', key: 'keyword', width: 100 },
    { title: '评论数', dataIndex: 'commentCount', key: 'commentCount', width: 80 },
    { title: '最近评论时间', dataIndex: 'lastCommentTime', key: 'lastCommentTime', width: 120 },
    { title: '操作', key: 'action', width: 160, render: (_, record) => <Space><a onClick={()=>handleShowArticle(record)}>查看文章</a><a onClick={()=>handleShowComments(record)}>查看评论</a></Space> },
  ];

  return (
    <div style={{padding:32, background:'#f5f7fa', minHeight:'100vh'}}>
      <Card style={{maxWidth:1300, margin:'0 auto', borderRadius:12, boxShadow:'0 2px 8px rgba(0,0,0,0.04)'}}>
        <div style={{display:'flex', alignItems:'center', marginBottom:24}}>
          <Button onClick={()=>navigate('/dashboard/enterprise')} style={{marginRight:16, borderRadius:6}}>返回</Button>
          <div style={{fontWeight:700, fontSize:20, display:'flex', alignItems:'center'}}>
            <div style={{width:4, height:22, background:'#3B5BDB', borderRadius:2, marginRight:10}}></div>
            内容评论管理
          </div>
          <div style={{flex:1}}></div>
          <Button danger style={{borderRadius:6, width:110}}>批量删除</Button>
        </div>
        <div style={{marginBottom:20, display:'flex', gap:16, alignItems:'center', background:'#fafbfc', padding:'18px 18px 0 18px', borderRadius:8}}>
          <Input value={searchTitle} onChange={e=>setSearchTitle(e.target.value)} placeholder="请输入文章标题" style={{width:320, borderRadius:6}} allowClear />
          <Select value={searchType} onChange={v=>setSearchType(v)} placeholder="请选择类型" style={{width:200, borderRadius:6}} allowClear>
            <Option value="图文">图文</Option>
            <Option value="视频">视频</Option>
          </Select>
          <Button type="primary" style={{borderRadius:6, width:90}} onClick={handleSearch}>查询</Button>
          <Button style={{borderRadius:6, width:90}} onClick={handleReset}>重置</Button>
        </div>
        <Table
          rowSelection={{selectedRowKeys,onChange:setSelectedRowKeys}}
          columns={columns}
          dataSource={filteredData}
          pagination={false}
          bordered
          style={{background:'#fff', borderRadius:8, marginTop:16}}
        />
        {/* 文章详情弹窗 */}
        <Modal
          open={articleModalVisible}
          onCancel={()=>setArticleModalVisible(false)}
          footer={null}
          width={600}
          title={null}
          bodyStyle={{padding:32, borderRadius:16, background:'#f7f9fa'}}
        >
          {articleDetail && (
            <div style={{ background:'#fff', borderRadius:12, boxShadow:'0 2px 8px rgba(0,0,0,0.06)', padding:32 }}>
              <div style={{ display:'flex', alignItems:'center', marginBottom:24 }}>
                <FileTextOutlined style={{ fontSize:32, color:'#3B5BDB', marginRight:16 }} />
                <div>
                  <div style={{ fontSize:22, fontWeight:700, color:'#222' }}>{articleDetail.title}</div>
                  <div style={{ color:'#888', fontSize:14, marginTop:4 }}>{articleDetail.keyword}</div>
                </div>
              </div>
              <Descriptions column={1} labelStyle={{fontWeight:600, color:'#555'}} contentStyle={{color:'#222'}}>
                <Descriptions.Item label={<span><AppstoreOutlined style={{marginRight:6}}/>发布渠道</span>}>{articleDetail.channel}</Descriptions.Item>
                <Descriptions.Item label={<span><ClusterOutlined style={{marginRight:6}}/>发布频道</span>}>{articleDetail.category}</Descriptions.Item>
                <Descriptions.Item label={<span><TagOutlined style={{marginRight:6}}/>文章类型</span>}>{articleDetail.type}</Descriptions.Item>
                <Descriptions.Item label={<span><UserOutlined style={{marginRight:6}}/>评论数</span>}>{articleDetail.commentCount}</Descriptions.Item>
                <Descriptions.Item label={<span><CalendarOutlined style={{marginRight:6}}/>最近评论时间</span>}>{articleDetail.lastCommentTime}</Descriptions.Item>
              </Descriptions>
            </div>
          )}
        </Modal>
        {/* 评论弹窗 */}
        <Modal
          open={commentModalVisible}
          onCancel={()=>setCommentModalVisible(false)}
          footer={null}
          width={600}
          title={<div style={{fontWeight:700,fontSize:20}}>文章评论</div>}
          bodyStyle={{padding:'24px 32px 16px 32px', minHeight:400}}
        >
          <div style={{marginBottom:16, display:'flex', alignItems:'center'}}>
            <span style={{fontWeight:500,marginRight:12}}>评论时间：</span>
            <DatePicker
              value={commentTime}
              onChange={setCommentTime}
              placeholder="请选择时间"
              style={{width:180}}
              allowClear
              showTime
            />
          </div>
          <div style={{color:'#888',marginBottom:8}}>共{currentComments.length}条评论</div>
          <div style={{maxHeight:350,overflowY:'auto',paddingRight:8}}>
            {currentComments.map(c=>(
              <div key={c.id} style={{display:'flex',marginBottom:18}}>
                <Avatar src={c.avatar} size={40} style={{marginRight:12}} />
                <div style={{flex:1}}>
                  <div style={{display:'flex',alignItems:'center',marginBottom:2}}>
                    <span style={{fontWeight:500}}>{c.name}</span>
                    <span style={{color:'#888',fontSize:13,marginLeft:8}}>{c.time}</span>
                  </div>
                  <div style={{whiteSpace:'pre-line',marginBottom:4}}>{c.content}</div>
                  {c.replies && c.replies.length>0 && (
                    <div style={{background:'#f7f8fa',borderRadius:6,padding:'8px 12px',marginBottom:4}}>
                      {c.replies.map(r=>(
                        <div key={r.id} style={{fontSize:13,marginBottom:2}}>
                          <span style={{color:'#3B5BDB',fontWeight:500}}>{r.name}</span> 回复 <span style={{color:'#3B5BDB',fontWeight:500}}>{c.name}</span>：{r.content}
                          <span style={{color:'#888',fontSize:12,marginLeft:8}}>{r.time}</span>
                        </div>
                      ))}
                    </div>
                  )}
                  <div style={{display:'flex',alignItems:'center',fontSize:13,color:'#888'}}>
                    <span style={{marginRight:16,cursor:'pointer'}}>👍 {c.likes}</span>
                    <span style={{cursor:'pointer'}}>回复</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div style={{textAlign:'center',marginTop:8}}>
            <a style={{color:'#3B5BDB',fontSize:15,cursor:'pointer'}}>查看更多评论</a>
          </div>
        </Modal>
        <div style={{marginTop:24, textAlign:'right'}}>
          <Pagination total={100} pageSize={10} showSizeChanger={false} />
        </div>
      </Card>
    </div>
  );
} 